<template>
	<div class="address">
		<Header title="选择收货地址" :isLeft="true"></Header>
		<!-- 实现需求:获取城市+搜索框+定位（组件） -->
		<div class="city_search">
			<!-- 搜索框 -->
			<div class="search">
				<span class="city">
					{{city}}
					<!-- 向下文字图标 -->
					<i class="fa fa-angle-down"></i>
				</span>
				<!-- 搜索文字图标 -->
				<i class="fa fa-search"></i>
				<input type="text" v-model="search_val" placeholder="小区/写字楼/学校等">
			</div>
			<!-- Location组件，因address是计算属性，基于响应式依赖所缓存，所以是动态prop,进行bind绑定 -->
			<Location :address="address"></Location>
		</div>
		<!-- 需求3：显示输入提示:div+ul+li遍历 -->
		<div class="area">
			<ul class="area_list"
					v-for="(item,index) in areaList" 
					:key="index"
			>
				<li>
					<h4>{{item.name}}</h4>
					<p>{{item.district}}{{item.address}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Header from "../components/Header"
import Location from '../components/Location'
export default {
	name: 'Address',
	components: {
		Header,
		Location
	},
	data () {
		return {
			city: '',	//当前城市
			search_val: '',
			areaList: []
		}
	},
	// 两个需求：点击获取home页面，跳转到adress页面，获取city + 获取点击的adress
	// 第一个需求：用到路由，beforeRouteEnetr(组件内的守卫) ，进入页面前，组件实例未创建(看Home.vue的$router.push)
	// https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB
	beforeRouteEnter (to,from,next) {
		// 接收到params: {city: "佛山市"}
		// console.log(to.params.city)
		next(vm => {
   	 	// 通过 `vm` 访问组件实例
			vm.city = to.params.city
		})
	},
	// 第二个需求：获取点击的adress(使用计算属性)
	computed: {
		address () {
			return this.$store.getters.location.formattedAddress
		}
	},
	// 需求：根据关键字检索位置信息。需求1.侦听器（与watch不同）
	// 当需要在数据变化时执行异步或*开销较大*的操作时，通过 watch 选项提供了一个更通用的方法，来
	// https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8
	watch: {
		// search_val一发生改变，触发函数
		search_val() {
			this.searchPlace()
		}
	},
	methods: {
		searchPlace() {
			// 输入内容一改变，立刻打印输入内容
			// console.log(this.search_val)
			
			// 需求2：获取输入提示，检索内容
			const self = this
			// https://lbs.amap.com/api/javascript-api/guide/services/autocomplete
			AMap.plugin('AMap.Autocomplete', function(){
				// 实例化Autocomplete
				var autoOptions = {
					// city为当前城市
					city: self.city
				}
				// keyword改为input输入内容
				var autoComplete= new AMap.Autocomplete(autoOptions);
				autoComplete.search(self.search_val, function(status, result) {
					// 搜索成功时，result即是对应的匹配数据

					// 定义area为数组，将tips赋值到areaList
					self.areaList = result.tips	
				})
			})			
		}
	}

}
</script>


<style scoped>
.address {
	/* 宽高100%+可滚动+盒模型border-box+上内边距（header组件高度为45px） */
	width: 100%;
	height: 100%;
	overflow: atuo;
	box-sizing: border-box;
	padding-top: 45px
}

.city_search {
	/* 白色外背景+内边距（撑开）+文字颜色 */
	background-color: #fff;
	padding: 10px 20px;
	color: #333
}

.search {
	/* 灰色内背景（长方形）+圆角+border-box+高度 */
	background-color: #eee;
	border-radius: 10px;
	box-sizing: border-box;
	height: 40px;
	line-height: 40px
}

.search .city {
	/* 左city左右边距10px（撑开） */
	padding: 0 10px;
}

.city i {
	/* city内的文字图标向右撑开 */
	margin-right: 10px;
}

.search input {
	/* 右侧的搜索框加做外边距+灰色背景+无边框无外线 */
	margin-left: 5px;
	background: #eee;
	outline: none;
	border: none;
}

/* area样式 */
.area {
	/* margin-top与上面分隔，背景色变白 */
	margin-top: 16px;
	background: #fff;
}

.area li {
	/* 这里使用padding（而不是上面使用padding），因为空白的区域还是可点击的，而且border-item长度才是100%，不然小于100% */
	border-bottom: 1px solid #eee;
	padding: 8px 16px;
	color: #aaa;
}

.area li h4 {
	/* 字体加粗+变黑+外下边距（块级元素） */
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
}
</style>